<template>
  <div class="">
    <view class="imgViewbox">
      <el-image src="../../src/assets/img/home2.png" class="imgView">
      </el-image>
    </view>
    <view class="btn" @click="handleNavige"></view>
  </div>
</template>
<script>
import { nextTick, onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
export default {
  components: {},
  setup() {
    const heightTop = ref(200);
    const widthLeft = ref(400);
    const router = useRouter();
    // window.addEventListener("resize", function () {
    //   console.log(document.documentElement.clientWidth);
    //   console.log(document.documentElement.clientHeight);
    //   heightTop.value = document.documentElement.clientHeight-200;
    //   widthLeft.value = document.documentElement.clientWidth/2;
    // });
    const handleNavige = () => {
      router.push("/home1");
    };
    return {
      heightTop,
      widthLeft,
      handleNavige,
    };
  },
};
</script>
<style lang="less" scoped>
@import "../../assets/css/common.css";
.container{
    padding:20px;
}
.imgViewbox {
  position: relative;
}
.imgView {
  width: 100%;
  height: 100%;
}
.btn {
  position: absolute;
  //   background: red;
  height: 320px;
  width: 280px;
  bottom: 8%;
  right: 35%;
  cursor: pointer;
}
</style>
